<template>
    <div>
        <div class="btns" style="margin: 10px 0;">
            <el-button color="#CB172E" type="primary" :icon="Search">搜素</el-button>
            <el-button color="#CB172E" type="primary" :icon="Plus" @click="add">添加</el-button>
            <el-button color="#CB172E" type="primary" :icon="CloseBold">删除</el-button>
            <el-button color="#CB172E" type="primary" :icon="Select">启用</el-button>
            <el-button color="#CB172E" type="primary" :icon="CircleCloseFilled">禁用</el-button>
        </div>
        <!-- 表格 -->
        <el-table ref="multipleTableRef" :data="accountList" row-key="id" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column property="id" label="编号" width="60" />
            <el-table-column property="username" label="登录名" />
            <el-table-column property="name" label="昵称"  width="120"/>
            <el-table-column property="phone" label="电话" width="130" />
            <el-table-column property="email" label="邮箱" width="150" />
            <el-table-column property="num" label="登录次数" />
            <el-table-column label="最后编辑时间" width="200">
                <template #default="scope">
                    {{ dayjs(scope.row.time).format('YYYY-MM-DD HH:mm:ss') }}
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template #default="scope">
                    <el-icon v-show="scope.row.status" color="red"><Select /></el-icon>
                    <el-icon v-show="!scope.row.status">
                        <CloseBold />
                    </el-icon>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="240">
                <template #default="scope">
                    <el-button size="small" :icon="EditPen" @click="edit(scope.row)">编辑</el-button>
                    <el-button size="small" :icon="EditPen">授权</el-button>
                    <el-button size="small" :icon="CircleCloseFilled">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 对话框 -->
        <AccountDialog ref="child"></AccountDialog>
        <!-- 分页器 -->
        <el-pagination style="margin-top: 15px;" v-model:current-page="currentPage4" v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]"  layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script setup>
import dayjs from "dayjs"
import { Search, Plus, CloseBold, Select, CircleCloseFilled, EditPen } from '@element-plus/icons-vue'
import { ref } from 'vue';
import AccountDialog from "../../components/AccountDialog.vue";
const multipleSelection = ref([])
const child = ref()
const accountList = ref([
    { id: 1, username: "admin", name: "超级管理员", phone: 13111111111, email: "haha@163.com", num: 998, time: 1759324753945, status: true },
    { id: 2, username: "admin", name: "超级管理员", phone: 13111111111, email: "haha@163.com", num: 998, time: 1759324753945, status: true },
    { id: 3, username: "admin", name: "超级管理员", phone: 13111111111, email: "haha@163.com", num: 998, time: 1759324753945, status: false },
    { id: 4, username: "admin", name: "超级管理员", phone: 13111111111, email: "haha@163.com", num: 998, time: 1759324753945, status: false },
    { id: 5, username: "admin", name: "超级管理员", phone: 13111111111, email: "haha@163.com", num: 998, time: 1759324753945, status: true },
    { id: 6, username: "admin", name: "超级管理员", phone: 13111111111, email: "haha@163.com", num: 998, time: 1759324753945, status: true },
    { id: 7, username: "admin", name: "超级管理员", phone: 13111111111, email: "haha@163.com", num: 998, time: 1759324753945, status: true },
])
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
// 添加
const add = () => {
    child.value.showDialog()
}
//编辑
const edit = (row) => {
    child.value.showDialog(row)
}
</script>
<style lang="scss" scoped></style>